<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
        ul {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        body {
            background: #333;
        }

        #pic {
            width: 400px;
            height: 500px;
            position: relative;
            margin: 0 auto;
            background: url(img/loader_ico.gif) no-repeat center #fff;
        }

        #pic img {
            width: 400px;
            height: 500px;
        }

        #pic ul {
            width: 40px;
            position: absolute;
            top: 0;
            right: -50px;
        }

        #pic li {
            width: 40px;
            height: 40px;
            margin-bottom: 4px;
            background: #666;
        }

        #pic .active {
            background: #FC3;
        }

        #pic span {
            top: 0;
        }

        #pic p {
            bottom: 0;
            margin: 0;
        }

        #pic p, #pic span {
            position: absolute;
            left: 0;
            width: 400px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #fff;
            background: #000;
        }
    </style>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById('pic');
            var oImg = oDiv.getElementsByTagName('img')[0];
            var oSpan = oDiv.getElementsByTagName('span')[0];
            var oP = oDiv.getElementsByTagName('p')[0];
            var oUl = oDiv.getElementsByTagName('ul')[0];
            var aLi = oUl.getElementsByTagName('li');
            var arrUrl = ['img/1.png', 'img/2.png', 'img/3.png', 'img/4.png'];
            var arrText = ['小宠物', '图片二', '图片三', '面具'];
            var num = 0;
            var timer = null;
            function autoPlay() {
                timer = setInterval(function () {
                    num++;
                    num %= arrText.length;
                    fnTab();
                }, 1000);
            }

            // autoPlay();

            setTimeout(autoPlay, 2000);

            oDiv.onmouseover = function () {
                clearTimeout(timer);
            };
            oDiv.onmouseout = autoPlay;

            for (var i = 0; i < arrUrl.length; i++) {
                oUl.innerHTML += '<li></li>';
            }

            // 初始化
            function fnTab() {
                oImg.src = arrUrl[num];
                oSpan.innerHTML = 1 + num + ' / ' + arrUrl.length;
                oP.innerHTML = arrText[num];
                for (var i = 0; i < aLi.length; i++) {
                    aLi[i].className = '';
                }
                aLi[num].className = 'active';
            }

            fnTab();

            for (var i = 0; i < aLi.length; i++) {
                aLi[i].index = i;			// 索引值
                aLi[i].onclick = function () {
                    num = this.index;
                    fnTab();
                };
            }
        };
    </script>
</head>

<body>

<div id="pic">
    <img src=""/>
    <span>数量正在加载中……</span>
    <p>文字说明正在加载中……</p>
    <ul></ul>
</div>

</body>
</html>
